import { Card, Form, Input, Button } from 'antd'
import './AdminLogin.css'

export default function AdminLogin() {
  const onFinish = (values: any) => {
    console.log('Success:', values)
    // 这里处理登录逻辑
  }

  return (
    <div className="login-container">
      <div className="login-content">
        <div className="login-welcome">
          <h1>欢迎来到凯泽利后台</h1>
          <p>请使用您的账号登录管理系统</p>
        </div>
        
        <Card 
          title="管理员登录" 
          className="login-card"
          headStyle={{ borderBottom: 0 }}
        >
          <Form
            name="login"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            layout="vertical"
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input placeholder="请输入用户名" size="large" />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input.Password placeholder="请输入密码" size="large" />
            </Form.Item>

            <Form.Item>
              <Button 
                type="primary" 
                htmlType="submit" 
                block
                className="login-form-button"
              >
                登 录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </div>
  )
}